<template>
  <el-container class="manage-page">
    <!-- <el-header class="header">
      <ManageHeader />
    </el-header> -->
    <el-container class="main">
      <el-aside class="menu">
        <ManageMenu />
      </el-aside>
      <el-main class="content">
        <div class="content-container">
          <el-scrollbar height="100%">
            <router-view>
            </router-view>
          </el-scrollbar>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script  setup>
import ManageHeader from "./components/header.vue";
import ManageMenu from "./components/menu.vue";

</script>

<style lang="scss" scoped>
.manage-page {
  width: 100vw;
  height: 100vh;
  // padding: 24px;
  display: flex;
  align-items: center;
  --header-height: 80px;
  --menu-width: 240px;
  background: linear-gradient(118deg, #1964d6 0%, #2894eb 40%, #36c3ff 101%);

  .el-container {
    margin: 0;
    padding: 0;
  }

  .el-header {
    margin: 0;
    padding: 0;
  }

  .el-aside {
    margin: 0;
    padding: 0;
  }

  .el-main {
    margin: 0;
    padding: 0;
  }

  .header {
    width: 100%;
    height: var(--header-height);
  }

  .main {
    width: 100%;
    height: calc(100% - var(--header-height));
    display: flex;
    padding-left: 24px;
    padding-right: 40px;

    .menu {
      width: var(--menu-width);
      height: 100%;
    }

    .content {
      border-radius: 25px;
      width: calc(100% - var(--menu-width));
      height: 100%;
      background: #5755e3;

      .content-container {
        width: 100%;
        height: 100%;
        border-radius: 20px 0px 0px 0px;
        background-color: #fff;
      }
    }
  }
}
</style>